<template>
  <div>
    <h1>reactive 函数（定义data变量）</h1>
    <!-- <h1>{{ formData }}</h1>
    <h2 @click="changeName">{{ formData.name }}</h2> -->
    <ul>
      <li>{{ name }}:{{ age }}</li>
      <li @click="changeName">修改name</li>
    </ul>
  </div>
</template>

<script>
/**
 * 使用步骤

1. 从vue框架中导入reactive函数
2. 在setup函数中调用reactive函数并将对象数据传入
3. 在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去

 */
import { reactive, toRefs } from 'vue'
export default {
  setup () {
    // 定义变量
    const formData = reactive({ name: '小红', age: 18 })
    // return { formData }
    const changeName = () => {
      // 1.注意
      // 1.局部修改
      formData.name = Math.random() * 100
    }
    // 2. 把变量或方法返回给模板（必须）
    // 注意：这种写法失去响应式
    // return { formData, changeName }
    return { ...toRefs(formData), changeName }
  }

}
</script>

<style lang="scss" scoped>
</style>
